<template>
	<view class="content">
		<image class="top-head" src="/static/top_head.png" mode="aspectFit"></image>
		<view>
			<image class="name" src="/static/clearBlack/name2.png" mode="aspectFit"></image>
		</view>
		<view class="center">
			<view class="title">
				举报人（或举报单位）信息
			</view>
			<view class="change-object">
				<view :class="isPeople?'object-activate':'object'" @click="isPeople=true">
					个人举报
				</view>
				<view :class="isPeople?'object':'object-activate'" @click="isPeople=false">
					单位举报
				</view>
			</view>
			<view class="form-reported">
				<u--form v-if="isPeople" labelPosition="top" :labelStyle='labelStyle' labelWidth='500' :model="model1"
					:rules="rules" ref="form1">
					<u-form-item label="1-1、您的姓名:" prop="name" ref="item1">
						<u--input v-model="model1.name" border="surround"></u--input>
					</u-form-item>
					<u-form-item label="1-2、您的身份证号:" prop="id_card" ref="item1">
						<u--input v-model="model1.id_card" type='number' border="surround"></u--input>
					</u-form-item>
					<u-form-item label="1-3、您的手机号:" prop="phone" ref="item1">
						<u--input v-model="model1.phone" type='number' border="surround"></u--input>
					</u-form-item>
					<u-form-item label="1-4、现住地详址:" prop="address" ref="item1">
						<u--input v-model="model1.address" border="surround"></u--input>
					</u-form-item>
				</u--form>
				<u--form v-else labelPosition="top" :labelStyle='labelStyle' labelWidth='500' :model="model1"
					:rules="rules" ref="form1">
					<u-form-item label="1-1、您的单位名称:" prop="company" ref="item1">
						<u--input v-model="model1.company" border="surround"></u--input>
					</u-form-item>
					<u-form-item label="1-2、单位所在地详址:" prop="address" ref="item1">
						<u--input v-model="model1.address" border="surround"></u--input>
					</u-form-item>
					<u-form-item label="1-3、联系人姓名" prop="name" ref="item1">
						<u--input v-model="model1.name" border="surround"></u--input>
					</u-form-item>
					<u-form-item label="1-4、联系方式（手机号）:" prop="phone" ref="item1">
						<u--input v-model="model1.phone" type='number' border="surround"></u--input>
					</u-form-item>
				</u--form>
			</view>

			<view class="title">
				被举报人信息
			</view>
			<view class="change-object">
				<view :class="isPeople_reported?'object-activate':'object'" @click="isPeople_reported=true">
					举报个人
				</view>
				<view :class="isPeople_reported?'object':'object-activate'" @click="isPeople_reported=false">
					举报单位
				</view>
			</view>
			<view class="form-reported">
				<u--form v-if="isPeople_reported" labelPosition="top" :labelStyle='labelStyle' labelWidth='500'
					:model="model2" :rules="rules" ref="form1">
					<u-form-item label="2-1、主要被举报人姓名或绰号：" prop="r_name" ref="item1">
						<u--input v-model="model2.r_name" border="surround" placeholder='如不了解请填写"不清楚"'>
						</u--input>
					</u-form-item>
					<!-- <text style="font-size: 30rpx;">（此处最多可填写10人。如有多个被举报人，请用‘，’隔开）</text> -->
					<u-form-item label="2-2、主要被举报人性别：" prop="sex" ref="item1" @click="select('sex')">
						<u--input v-model="model2.sex" disabled disabledColor="#ffffff" placeholder="请选择性别"
							border="surround">
							<u-icon slot="suffix" name="arrow-right"></u-icon>
						</u--input>
					</u-form-item>
					<u-form-item label="2-3、主要被举报人身份信息：" prop="id_info" ref="item1" @click="select('reportedInfo')">
						<u--input v-model="model2.id_info" border="surround" placeholder="请选择性别">
							<u-icon slot="suffix" name="arrow-right"></u-icon>
						</u--input>
					</u-form-item>
					<u-form-item label="2-4、主要被举报人电话号：" prop="r_phone" ref="item1">
						<u--input v-model="model2.r_phone" border="surround" placeholder='如不了解请填写"不清楚"'>
						</u--input>
					</u-form-item>
					<u-form-item label="2-5、主要被举报人工作单位及职务：" prop="r_job" ref="item1">
						<u--input v-model="model2.r_job" border="surround" placeholder='如不了解请填写"不清楚"'>
						</u--input>
					</u-form-item>
					<u-form-item label="2-6、主要被举报人现居地详址：" prop="r_address" ref="item1">
						<u--input v-model="model2.r_address" border="surround" placeholder='如不了解请填写"不清楚"'>
						</u--input>
					</u-form-item>
				</u--form>
				<u--form v-else labelPosition="top" :labelStyle='labelStyle' labelWidth='500' :model="model2"
					:rules="rules" ref="form1">
					<u-form-item label="2-1、被举报单位名称：" prop="r_name" ref="item1">
						<u--input v-model="model2.r_name" border="surround" placeholder='如不了解请填写"不清楚"'>
						</u--input>
					</u-form-item>
					<u-form-item label="2-2、被举报单位电话号码：" prop="r_phone" ref="item1">
						<u--input v-model="model2.r_phone" border="surround" placeholder='如不了解请填写"不清楚"'>
						</u--input>
					</u-form-item>
					<u-form-item label="2-3、被举报单位所在地详址：" prop="r_address" ref="item1">
						<u--input v-model="model2.r_address" border="surround" placeholder='如不了解请填写"不清楚"'>
						</u--input>
					</u-form-item>
				</u--form>
			</view>

			<view class="title">
				黑恶势力违法犯罪信息
			</view>
			<view class="form-reported">
				<u--form labelPosition="top" :labelStyle='labelStyle' labelWidth='400' :model="model3" :rules="rules"
					ref="form1">
					<u-form-item label="3-1、*主要违法犯罪活动发生地：" prop="f_address" ref="item1">
						<u--input v-model="model3.f_address" border="surround" placeholder='如不了解请填写"不清楚"'>
						</u--input>
					</u-form-item>
					<u-form-item label="3-2-1、*主要违法犯罪活动发生起始时间(年份)：" prop="f_starttime" ref="item1">
						<u--input v-model="model3.f_starttime" type='number' border="surround"
							placeholder='如:2020 ( 注意!不能大于结束时间 )'>
						</u--input>
					</u-form-item>
					<u-form-item label="3-2-2、*主要违法犯罪活动发生结束时间(年份)：" prop="f_endtime" ref="item1">
						<u--input v-model="model3.f_endtime" @blur='endTimeBlur' type='number' border="surround"
							placeholder='如:2022 ( 注意!不能小于起始时间 )'>
						</u--input>
					</u-form-item>
					<u-form-item label="3-3、*组织或团伙规模：" prop="isgang" ref="item1" @click="select('crimeSize')">
						<u--input v-model="model3.isgang" border="surround" placeholder="请选择">
							<u-icon slot="suffix" name="arrow-right"></u-icon>
						</u--input>
					</u-form-item>
					<u-form-item label="3-4、*请选择该黑恶势力涉嫌的罪名：" prop="charge" ref="item1" @click="select('charge')">
						<u--input v-model="(model3.charge).toString()" border="surround" placeholder="请选择">
							<u-icon slot="suffix" name="arrow-right"></u-icon>
						</u--input>
					</u-form-item>
					<u-form-item label="3-5、*请选择该黑恶势力涉及的行业、领域：" prop="industry" ref="item1" @click="select('industry')">
						<u--input v-model="(model3.industry).toString()" border="surround" placeholder="请选择">
							<u-icon slot="suffix" name="arrow-right"></u-icon>
						</u--input>
					</u-form-item>
					<u-form-item label="3-6、*请简要描述黑恶势力违法犯罪事实：" prop="f_content" ref="item1">
						<u-textarea v-model="model3.f_content" height='100' placeholder="如：违法犯罪活动发生的时间、地点、人员、情节、后果等"
							maxlength='3000'></u-textarea>
					</u-form-item>
				</u--form>
			</view>

			<view class="title">
				“保护伞”信息
				<text style="font-size: 20rpx;">如果无或者不清楚可以不填写</text>
			</view>
			<view class="form-reported">

			</view>
			<view class="form-reported">
				<u--form labelPosition="top" :labelStyle='labelStyle' labelWidth='300' :model="model4" :rules="rules"
					ref="form1">
					<u-form-item label="4-1、“保护伞”姓名：" prop="s_name" ref="item1">
						<u--input v-model="model4.s_name" border="surround" placeholder='如不了解请填写"不清楚"'>
						</u--input>
					</u-form-item>
					<!-- <text style="font-size: 30rpx;">（此处可最多填写10人。）</text> -->
					<u-form-item label="4-2、“保护伞”身份信息：" prop="id_info" ref="item1" @click="select('protectInfo')">
						<u--input v-model="model4.id_info" border="surround" placeholder="请选择">
							<u-icon slot="suffix" name="arrow-right"></u-icon>
						</u--input>
					</u-form-item>
					<u-form-item label="4-3、“保护伞”工作单位及职务:（请详细写明单位全称）" prop="s_job" ref="item1">
						<u--input v-model="model4.s_job" border="surround" placeholder='如不了解请填写"不清楚"'>
						</u--input>
					</u-form-item>
					<u-form-item label="4-4、请简要描述“保护伞”违法犯罪情况。（限3000字）" prop="s_content" ref="item1">
						<u-textarea v-model="model4.s_content" height='100' placeholder="如：违法犯罪活动发生的时间、地点、人员、情节、后果等"
							maxlength='3000'></u-textarea>
					</u-form-item>
				</u--form>
			</view>

			<view class="upload">
				线索图片(非必填，最多可上传9张)：
				<my-upload :filetype='"image"' @fileUrl='imagesFile'></my-upload>
			</view>
			<!-- <view class="upload">
				线索视频(非必填，最多可上传9张)：
				<my-upload :filetype='"video"' @fileUrl='videosFile'></my-upload>
			</view> -->

			<view class="captcha">
				<view style="font-weight: 700;">
					验证码：
				</view>
				<view class="captcha-item">
					<u--input v-model="captchavalue" border="surround"></u--input>
					<image :src="captchaImage" mode="scaleToFill" @click="changCaptcha"></image>
				</view>
			</view>

			<view class="button" @click="submit">
				<text>提交举报</text>
			</view>

		</view>
		<view class="bottom">
			<p>版权所有 © 中共邵阳市委政法委员会</p>
			<!-- <p style='margin: 30rpx 0;'>京ICP备19020621号-1</p> -->
		</view>

		<!-- 单选选择器 -->
		<u-picker :show="showSelect" :columns="columns" @cancel="showSelect=false" keyName='name' @confirm='confirm'>
		</u-picker>
		<!-- 多选选择器 -->
		<zhilin-picker v-model="m_showSelect" :data="columns[0]" @change="onChange" />

	</view>
</template>

<script>
	import {
		blackReport,
		getCaptcha
	} from '@/config/api.js'
	import blackCrimeData from '@/common/blcakData.js'
	import zhilinPicker from "@/components/zhilin-picker.vue"
	import myUpload from '@/components/myUpload.vue'
	import {
		captcha
	} from '@/pages/mixin/captcha.js'

	export default {
		components: {
			zhilinPicker,
			myUpload
		},
		// mixins: [captcha],
		data() {
			return {
				captchavalue: '',
				captchaImage: uni.$u.http.config.baseURL + '/captcha/api' + uni.getStorageSync('token'),
				checked: false,
				pageType: '',
				isPeople: true,
				isPeople_reported: true,
				labelStyle: {
					'font-weight': '700'
				},
				model1: {
					company: '',
					name: '',
					phone: '',
					id_card: '',
					address: '',
				},
				model2: {
					r_name: '',
					sex: '',
					r_sex: "",
					r_job: "",
					r_id_info: "",
					r_phone: "",
					r_address: "",
					r_birthplace: '',
				},
				model3: {
					f_address: '',
					f_starttime: '',
					f_endtime: '',
					f_gang: '',
					isgang: '',
					f_industry: '',
					industry: '',
					f_money: '',
					f_num: '',
					f_type: '',
					f_charge: '',
					charge: '',
					f_content: '',
				},
				model4: {
					s_exist: 2,
					s_name: '',
					s_id_info: '',
					s_job: '',
					s_content: '',
				},
				video_images: [],
				images: [],
				rules: {},
				imageFileList: [],
				videoFileList: [],
				showSelect: false,
				m_showSelect: false,
				actions: {
					sex: blackCrimeData.sex,
					reportedInfo: blackCrimeData.reportedInfo,
					protectInfo: blackCrimeData.protectInfo,
					industry: blackCrimeData.industry,
					charge: blackCrimeData.crimeName,
					crimeSize: blackCrimeData.crimeSize,
				},
				columns: [],
				selectType: '',

			}
		},
		onLoad(option) {
			// this.changCaptcha()
		},
		onShow() {
			this.changCaptcha()
		},
		methods: {
			changCaptcha() {
				this.captchaImage += ('?' + Math.random())
			},
			routeTo() {
				if (this.checked) {
					uni.navigateTo({
						url: ''
					})
				}
			},
			endTimeBlur() {
				if (this.model3.f_endtime < this.model3.f_starttime) {
					uni.showToast({
						title: '起始时间不能大于结束时间',
						icon: 'none'
					})
					this.model3.f_endtime = ''
				}
			},
			afterRead() {},
			deletePic() {},
			// 打开选择器
			select(type) {
				uni.hideKeyboard()
				this.selectType = type
				this.columns = [this.actions[type]]
				if (type == 'sex' || type == 'reportedInfo' || type == 'crimeSize' || type == 'protectInfo') {
					this.showSelect = true
				} else {
					this.m_showSelect = true
				}
			},
			// 选择器确定时,回显
			confirm(e) {
				if (this.selectType === 'sex') {
					this.model2.r_sex = e.value[0].id
					this.model2.sex = e.value[0].name
				} else if (this.selectType === 'reportedInfo') {
					this.model2.id_info = e.value[0].name
					this.model2.r_id_info = e.value[0].id
				} else if (this.selectType === 'crimeSize') {
					this.model3.isgang = e.value[0].name
					this.model3.f_gang = e.value[0].id
				} else if (this.selectType === 'protectInfo') {
					this.model4.id_info = e.value[0].name
					this.model4.s_id_info = e.value[0].id
				}
				this.showSelect = false
				this.m_showSelect = false
			},
			// 多选弹窗
			onChange(val) {
				console.log(val)
				if (this.selectType === 'charge') {
					this.model3.charge = val.map(item => item.name)
					this.model3.f_charge = val.map(item => item.id + 1)
				} else if (this.selectType === 'industry') {
					this.model3.industry = val.map(item => item.name)
					this.model3.f_industry = val.map(item => item.id + 1)

				}
			},
			imagesFile(val) {
				this.images = val
			},
			videosFile(val) {
				this.video_images = val
			},
			submit() {
				let data = {
					type: this.isPeople ? 'personal' : 'company',
					...this.model1,
					r_type: this.isPeople_reported ? 'personal' : 'company',
					...this.model2,
					...this.model3,
					...this.model4,
					images: this.images,
					video_images: this.video_images,
					captcha: this.captchavalue
				}
				blackReport(data).then(res => {
					if (res.code === 1) {
						let no = res.data.no
						uni.showModal({
							title: '您的举报已提交，请牢记查询编号',
							showCancel: false,
							content: no,
							confirmText: "复制到剪贴板",
							success(res) {
								uni.setClipboardData({
									data: no,
									success: res => {
										uni.showToast({
											title: '复制成功',
										})
									}
								})
							}
						})
					}
					this.changCaptcha()
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		width: 750rpx;
	}

	/deep/.u-input--radius {
		background-color: #fff;
	}

	.content {
		width: 100%;
		// height: 360%;
		background: url(~@/static/bg_long2.jpg) no-repeat top;
		background-size: 100% 100%;
		position: relative;
		padding-bottom: 20rpx;
		overflow-x: hidden;

		.top-head {
			width: 750rpx;
			margin-top: -130rpx;
		}

		.name {
			width: 750rpx;
			margin-top: -350rpx;
			// height: 200rpx;
		}

		.title {
			height: 70rpx;
			width: 650rpx;
			border-radius: 10rpx;
			line-height: 70rpx;
			font-size: 36rpx;
			font-weight: 700;
			color: #004789;
			margin: 40rpx 60rpx;
			margin-top: 20rpx;
		}

		.change-object {
			display: flex;
			justify-content: space-around;
			margin: 0 100rpx;

			.object {
				width: 200rpx;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				font-weight: 700;
				border: 1rpx solid #ccc;
				color: #ccc;
				border-radius: 10rpx;
			}

			.object-activate {
				width: 200rpx;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				color: red;
				font-weight: 700;
				background-color: #fff;
				border: 2rpx solid red;
				border-radius: 10rpx;
			}
		}

		.center {
			margin-top: -130rpx;

			.form-reported {
				margin: 0 60rpx;
			}

			.upload {
				margin: 20rpx 60rpx;
				font-weight: 700;
				color: #303133;
			}

			.captcha {
				padding: 60rpx;

				.captcha-item {
					display: flex;

					u--input {
						width: 200rpx;
					}

					image {
						margin-left: 20rpx;
						width: 200rpx;
						height: 80rpx;
						background-color: #ccc;
					}
				}
			}

			.button {
				background-color: #8b050b;
				height: 100rpx;
				width: 470rpx;
				border-radius: 10rpx;
				color: #fff;
				font-size: 40rpx;
				line-height: 100rpx;
				text-align: center;
				letter-spacing: 5rpx;
				margin: 40rpx auto;
				margin-top: 80rpx;
			}
		}

		.bottom {
			margin-top: 100rpx;
			text-align: center;
			line-height: 38rpx;
			font-size: 30rpx
		}
	}
</style>
